<div class="middle surface-shaded">
  <div class="middle-content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div ng-hide="template" class="mar-top-lg">
            Loading...
          </div>
          <div ng-if="template" class="row osc-form">
            <div class="col-md-2 icon hidden-sm hidden-xs">
              <custom-icon resource="template" kind="template"></custom-icon>
            </div>
            <div class="col-md-8">
              <osc-image-summary resource="template"></osc-image-summary>
              <div ng-if="templateImages.length" class="images">
                <h2>Images</h2>
                <ul class="list-unstyled" ng-repeat="image in templateImages">
                  <li>
                    <i class="pficon pficon-image" aria-hidden="true"></i>
                    <span class="name">
                      {{image.name}}
                    </span>
                    <span ng-if="image.usesParameters.length" class="text-muted small">
                      <span ng-if="!image.name">Image value set</span>
                      from parameter<span ng-if="image.usesParameters.length > 1">s</span>
                      <span ng-repeat="parameterName in image.usesParameters">
                        {{parameterDisplayNames[parameterName]}}<span ng-if="!$last">,</span>
                      </span>
                    </span>
                  </li>
                </ul>
              </div>
              <form><!-- wrapping form element is necessary for the enter key to trigger the submit button -->
                <process-template
                    project="project"
                    template="template"
                    prefill-parameters="prefillParameters">
                </process-template>
              </form>
            </div>
          </div>
        </div><!-- /col-* -->
      </div>
    </div>
  </div><!-- /middle-content -->
</div><!-- /middle -->
